Форум dkLab и Denwer

[Maus]

Вопрос в общем-то про CSS - все эти float, position, display. На W3C есть спецификация, но мне для понимания её недостаточно. Хочется с примерчиками - чтоб можно было посмотреть, подергать и поковыряться.

Просто я сейчас сижу и не могу решить такие идиотские вопросы:
1) Как нарисовать в IE див размерами 1x1 пиксель?
2) Как табличку из 1х2 ячеек переверстать в дивы?

[HardNik]

Хм, мне помогло:
www.webmascon.com/topics/coding/42a.asp
ну и далее по ссылкам с этой странички.

[Maus]

HardNik
Я там был. На Вебмасконе много хорошего, но там или некие общие соображения, или решения очень конкретных задач. Единственно, что вроде бы похожее нашел - это
1) трехпиксельный баг
2) (двух/трех)колоночная верстка

Но вообще я надеялся, что есть некий грамотный ресурс, предназначенный именно для объяснения как перейти с табличной верстки на дивную. Задача-то актуальная.

[Юрий Насретдинов]

Maus wrote:

Задача-то актуальная.

Ты знаешь, она скорее надуманная. В большинстве случаев надёжнее и удобнее делать таблицами. Т.к. современные браузеры уже давно их умеют по частям показывать.

[Maus]

Юpий Насрeтдинов
уметь-то умеют.. Но вот когда даже на каждый спейсер расходуется таблица - рендерится это ооочень медленно. Особенно в ИЕ.
А еще веселее - когда в одной из ячеек таблицы обитает баннер, джаваскриптом подгружаемый из баннерокрутилки, которая тормозит. В таком случае ИЕ долго-долго кажет белую страничку, а потом ррраз! - и все отрендерил. С баннерорезкой фаза "долго-долго" отсутствует, к счастью..

[Юрий Насретдинов]

Maus wrote:

когда в одной из ячеек таблицы обитает баннер, джаваскриптом подгружаемый из баннерокрутилки, которая тормозит.

В крайнем случае можно повесить загрузку баннера куда-нибудь в конец документа, где уже таблицы нет. И динамически её туда засовывать.

Maus wrote:

Но вот когда даже на каждый спейсер расходуется таблица

В смысле?

[Maus]

Юpий Насрeтдинов
Можно конечно. Так в общем и предполагается сделать, но времени нет == руки не доходят == лень в дебри JS лезть.

Юpий Насрeтдинов wrote:

В смысле?

В прямом. У нас дизайнер со специфичным чувством юмора

[Юрий Насретдинов]

Maus wrote:

У нас дизайнер со специфичным чувством юмора

:)). Ну, тогда я боюсь и дивы вряд ли могут помочь :).

[Maus]

Юpий Насрeтдинов
Смогут. Я терпеливый, перевоспитаю

[HardNik]

Maus
Я, вообще-то, присоединяюсь к мнению Юpия Насретдинова. Причины следующие: каждый браузер имеет свою CSS по умолчанию, в FF вы ее и просмотреть можете. Мало этого, в приложении спецификации CSS2 признается, что пока только ее средствами HTML не описать(и через шесть лет ничего не изменилось). Кстати, часть примеров не проходит в IE5.x(с IE6 тоже не все гладко, несмотря на все декларации). А вот таблицы отображаются практически единобразно. Опять же, касаясь JS, DOM IE6 не совпадает с FF. C таблицами - все вроде одинаково. Объясняется это тщательной проработкой таблиц в HTML. Следет признать, что отказ от табличной верстки - глупость. На похожем принципе основаны большинство графических библиотек для GUI: (в Tk изначально была только табличная упаковка, wxWindows(если внимательно проанализировать иерархию объектов), AWT и их форки - яркий пример).
Единственное от чего следует отказаться - распорки.
IMHO, естественно.

[Лобач Олег]

[off]
Лично я за "дивную" вёрстку. Объясню свои мотивы:

1. "Дивный" код получается лаконичным и достаточно простым.
2. для редизайна достаточно изменит CSS не трогая HTML
3. нет необходимости делать отдельную версию для печати
4. разделение информации и представления (а это всегда гуд :))
5. соответствие духу и букве стандартов

[/off]

[bæv]

Примеры вёрстки (много и разные):
www.csszengarden.com/
www.mezzoblue.com/zengarden/alldesigns/

Тут -- статьи:
www.mezzoblue.com/articles/essentials/

(Сейчас найти не могу -- попадался мне один хороший сайт. Если найду/вспомню -- кину ссылку.)

P.S. Во! Вспомнил:

www.westciv.com/style_master/house/tutorials/quick/positioning/index.html
-- там и других статей много, но эта, кажется, как раз то, что нужно.

[Ant]

М

Так, только давайте без религиозных войн. Человек хочет получить больше знаний. Не вижу ни чего в этом плохого. У табличной вёрстки есть сови преимущества. У блочной - свои. И использовать нода обе вместе. Тогда будет полная гармония. (-: P.S. А вообще, сейчас как Илья придёт и разнесёт тут всё в пух и прах... (-;

[Maus]

bæv
Домо аригато годзаимас!

Пошел продираться сквозь ангрийские глаголы...

[Дмитрий Котеров]

Я вот, грешным делом, до сих пор не понимаю, ну как можно сделать div-ами таблицу из 2 столбцов, да так, чтобы оба столбца имели одинаковую высоту.

[HardNik]

Дмитрий Котеров
DIV.TABLE{ display: table }
DIV.TR { display: table-row }
DIV.TD { display: table-cell }
:)

[Лобач Олег]

Дмитрий Котеров wrote:

Я вот, грешным делом, до сих пор не понимаю, ну как можно сделать div-ами таблицу из 2 столбцов, да так, чтобы оба столбца имели одинаковую высоту.

rusmarket.ru/test/two_column/

Ну и в догонку - три колонки: rusmarket.ru/test/three_column/

[bæv]

М

Ветка выделена в отдельную тему «Пустые споры: "DIV или TAB"», расположенную в форуме Прочее (27 Июля 2005, 00:04).

P.S.
Это...
Просили уже: "Без религиозных войн".

Высказывайтесь по теме топика.

[aross]

Лобач Олег wrote:

Дмитрий Котеров wrote: ... не понимаю, ну как можно сделать div-ами таблицу из 2 столбцов, да так, чтобы оба столбца имели одинаковую высоту. rusmarket.ru/test/two_column/ Ну и в догонку - три колонки: rusmarket.ru/test/three_column/

А если раскрасить колонки? Попробовал. Ни о какой ОДИНАКОВОЙ ВЫСОТЕ DIVов в примерах речь и не идет.
Хотя в целом пример неплохой

[Лобач Олег]

aross wrote:

Ни о какой ОДИНАКОВОЙ ВЫСОТЕ DIVов

Вам обязательно нужна ОДИНАКОВАЯ ВЫСОТА? Или нужно чтобы они ВЫГЛЯДИЛИ одинаковой высоты?
Приведите пример, когда одинаковая высота необходима и без неё обойтись не получится.

[aross]

HardNik:
Opera 7.23, Firefox 0.9 - работает :), IE 6 - нет :(

[offtop]
Лобач Олег:
Не нужна, в общем-то, по крайней мере сегодня. А завтра... Завтра, быть может спецификацию все-таки дочитаю.
[/offtop]

[Maus]

Лобач Олег wrote:

Приведите пример, когда одинаковая высота необходима и без неё обойтись не получится.

Бэкграунд белый, фон каждой колонки темно-серый. Если колонки разной высоты - смотрится некузяво

[Лобач Олег]

Maus, Вы смотрели ссылки, которые я приводил?

[Maus]

Лобач Олег
Смотрю.. Что-то плохо воспринимается, извините..

[WingedFox]

Maus, Дмитрий Котеров
На 2 вопрос Олег уже ответил.
Если не придираться к разной высоте дивов, то с соблюденнием стандартов используется техника "ложных" колонок (оригинал - faux columns (www.alistapart.com/articles/fauxcolumns/) на Alist A Part)
Без соблюдения - используется такой трюк (найден на XPoint):

Code (html):

скопировать код в буфер обмена

< (december.com/html/4/element/.html)?xml version="1.0" encoding="iso-8859-1"?> (december.com/html/4/element/.html) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html (december.com/html/4/element/html.html) xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> (december.com/html/4/element/.html)  <head> (december.com/html/4/element/head.html)   <style (december.com/html/4/element/style.html) type="text/css"> (december.com/html/4/element/.html) #t, #t div {    border: 1px solid blue;    _float: left;    _height: 1px; } #t {    display: table; } #t div {    height: 100%;    display: table-cell; }   </style>  </head>  <body> (december.com/html/4/element/body.html)   <div (december.com/html/4/element/div.html) id="t"> (december.com/html/4/element/.html)    <div> (december.com/html/4/element/div.html)1</div>    <div> (december.com/html/4/element/div.html)<p> (december.com/html/4/element/p.html)2</p><p> (december.com/html/4/element/p.html)2</p><p> (december.com/html/4/element/p.html)2</p></div>   </div>  </body> </html>

Знак _ - это хак для IE.

Maus
Решение 1 вопроса:
а) #div {font-size: 1px}
b) <div><!-- --></div>

Что почитать - Xpoint, CodingForums, AlistAPart, Webmascon и т.п.

Вообще, лучше не читать, а экспериментировать и делиться своими соображениями с коллегами. Так быстрее будет освоена техника и легче добиться нужного результата.
Ну и мыслить надо иначе.
У меня есть знакомый, которому проще нарисовать таблицу по срезам из Фотошопа, вместо того, чтобы подумать - где какой блок должен быть расположен.

PS: За последнее время единственное для чего я использовал таблицы в структуре страницы, был сайт в 3 колонки, где требовалась работоспособность при отключенном JS.

[aross]

WingedFox wrote:

Знак _ - это хак для IE.

Эксперимент показывает, что "хаком для IE" является не знак "_", а "<?xml version="1.0" encoding="iso-8859-1"?>" перед DOCTYPE
Работает. Колонки действительно ОДИНАКОВОЙ высоты.
+1 (за найденную информацию)

[aross]

WingedFox wrote:

Знак _ - это хак для IE.

Позднее эксперимент показал, что без знака "_" в ОгнеЛисе теряется правая колонка, если в ней символов много.
[offtop]Едва нашел, как ее вернуть. А куда она девается... Может здесь ясновидящие есть? (-;[/offtop]

[aross]

Подытожу.

Code (css):	скопировать код в буфер обмена
#t{   display: table; } #t div {   display: table-cell; }

Это CSS 2. Для FireFox и Оперы достаточно. ( у меня FireFox 0.9.3 и Opera 7.23 - работает)
Для глючных IE (работает в 6.0 и 5.0)
1. "<?xml version="1.0" encoding="iso-8859-1"?>"
2.

Code (css):	скопировать код в буфер обмена
#t{   height: 1px; } #t div {   _float: left;    /* "_float" - чтобы FireFox не глючила */   height: 100%;    /* для IE */ }

[WingedFox]

aross
<?xml в начале документа сносит крышу IE.
Т.е. в режиме соблюдения стандартов работают MZ, FF, Opera, Safari и прочие.
IE работает в quirks mode.
Только так в нём можно добиться растягивания колонок по высоте.

Знак подчёркивания заставляет все браузеры, кроме IE, игнорировать последующую инструкцию.

[aross]

Забыл совсем.
Конструкция

Code (css):	скопировать код в буфер обмена
#t div

означает, что установки стиля будут влиять на всех потомков, в том числе на все вложенные DIV'ы.
Правильнее использовать

Code (css):	скопировать код в буфер обмена
#t>div

В этом случае стиль применяется только к непосредственным потомкам, не затрагивая их потомков

[WingedFox]

aross
Для совместимости с IE это делать не стоит.
Иначе придётся вводить ещё одно правило для указания IE height: 100%

[aross]

Попробовал поставить внутрь этой конструкции еще DIV'ы (в IE все поплыло, но, впрочем, есть ведь еще тэги )
И WingedFox прав: IE не всегда хочет понимать Element > SubElement правильно
[Offtop]Скоро мое спокойное приятие продукции Мелкософт перейдет в радикальное неприятие [/Offtop]

[Maus]

// offtop:
урл топика

Lingvo wrote:

Esteem - ... 2. гл. 1) высоко ценить; почитать, уважать, чтить; быть высокого мнения, отдавать должное

[WingedFox]

aross
IE в принципе не поддерживает CSS2 селекторы (el > sub, el + sib, el[attr] и прочие).

[bæv]

Тут наткнулся: типа, "CSS в картинках".
css.maxdesign.com.au/floatutorial/

Может, слишком упрощённо, но -- довольно наглядно.

[Андрей Фрoлов]

Вот здесь я в свое время разбирался с дивами.
Мне тогда нужно было закладки как можно проще сделать.
Вроде понятно написано.
www.htmlbook.ru/content/
Смотреть раздел *Использование слоев*

[Андрей Фрoлов]

Еще одну статью про способы позиционирования блоков HTML-документа с помощью CSS в рассылке увидел - может кому пригодится:
softwaremaniacs.org/blog/2005/08/03/css-layout-positioning/

[Антон Макаренко]

Готовые техники вёрстки CSS:
glish.com/css/
Очень помогло. За пару недель мучений наконец-то понял принципы вёрстки CSS и создал собственный макет документа, который и соответствует стандартам, и работает без глюков.

[Maus]

не знаю, описано ли это (сходу найти не удалось, а название вроде "Peekaboo bug" не шибко информативно, согласитесь), но:
1) Есть подключаемый CSS файл на удаленном сервере (когда все локально, эффект не проявляется)
2) В нем дважды объявлен некий класс:

Code (css):	скопировать код в буфер обмена
p {         margin-bottom: 7px;         margin-top: 6px; } /* тут еще пачка стилей */ p {         font-family: Verdana, Arial, Helvetica, sans-serif;         font-size: 11px;         margin-top: 0px;         margin-bottom: 0px; }

Так вот, FF и Opera обрабатывают это нормально, а IE 6 отрисовывает как ему заблагорассудится (не в варианте "1 или 2", а вообще как угодно)

[v3.14]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<title>Band</title>

<style type="text/css" media="screen">
/*<![CDATA[*/
<!--
body {
margin: 0px;
padding: 0px;
font-family: helvetic, arial, sans-serif;
color: #000000;
font-size: x-small;
background-color: #ffffff;
}

p {
color: #000000;
font-size: x-small;
}

#header {
margin:5px 0 0 0;
background-color: #ffdead;
height:100px;
width:750px;
text-align:right;
vertical-align:middle;
margin-left: auto;
margin-right: auto;
border: 1px solid #ff9900;
}

.address {
float:right;
width:35%;
margin:5px 10px 0 0;
color: #ffffff;
}

#foot {
margin-bottom: 10px;
text-align: center;
font-size: x-small;
width: 752px;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
border-top: 1px dotted #ff9900;
}

#foot a {
color: #000000;
text-decoration: none;
}
#foot a:hover {
color: #ff9900;
text-decoration: underline;
}

a {
color:#000000;
}

#menu_panel {
margin:3px 0 0 0;
border: 1px solid #ff9900;
background-color: #ffdead;
width:750px;
vertical-align:middle;
margin-left: auto;
margin-right: auto;
overflow: auto;
}

#body_panel {
margin: 3px 0 0 0;
width: 752px;
vertical-align: middle;
margin-left: auto;
margin-right: auto;
overflow: auto;
}

#left_panel {
width: 160px;
float: left;
height: auto;
}

#right_panel {
width: 160px;
float: right;
height: auto;
}

#center_panel {
margin-right: 165px;
margin-left: 165px;
width: auto;
}

.box {
border: 1px solid #ff9900;
margin-bottom:3px;
padding: 2px
}
.box_header {
font-size: medium;
font-weight: bold;
background-color: #ffdead;
padding:0 10px 0 5px;
margin: 0;
text-align: center;
border: 0px solid #ff9900;
}
.box_footer {
background-color: #ffdead;
padding: 3px 10px 3px 0;
text-align: right;
font-size: xx-small;
margin-top: 4px;
}
.box_footer a {
color: #000000;
text-decoration: underline;
}

table {
font-weight: normal;
text-align: left;
vertical-align: middle;
border: 1px solid #cccccc;
padding: 3px 5px 3px 5px;
background: #fffff;
border-collapse: collapse;
margin-left: auto;
margin-right: auto
}
td {
font-weight: normal;
text-align: left;
vertical-align: middle;
border: 1px solid #cccccc;
padding: 3px 5px 3px 5px;
background: #fffff;
border-collapse: collapse
}
th {
font-weight: normal;
text-align: left;
vertical-align: middle;
border: 1px solid #cccccc;
padding: 3px 5px 3px 5px;
background: #ffdead;
border-collapse: collapse
}

-->
/*]]>*/
</style>
</head>

<body>

<!-- Заголовок -->
<div id="header">
  <div class="address">

123 Любая улица, Город, индекс<br />
(812) 555-1212
  </div>
</div>

<!-- Панель меню -->
<div id="menu_panel">
<div style="margin-right:2px; float: left; cursor: hand; width: auto; padding: 2px; text-align: center; border: 1px solid Gray; background-color: transparent" onmouseover="style.backgroundColor='#EEEEEE'" onmouseout="style.backgroundColor='transparent'" onclick="self.location='www.blumentals.net'">
  Нажми меня
</div>
<div style="margin-right:2px; float: left; cursor: hand; width: auto; padding: 2px; text-align: center; border: 1px solid Gray; background-color: transparent" onmouseover="style.backgroundColor='#EEEEEE'" onmouseout="style.backgroundColor='transparent'" onclick="self.location='www.blumentals.net'">
  Нажми меня
</div>
<div style="margin-right:2px; float: left; cursor: hand; width: auto; padding: 2px; text-align: center; border: 1px solid Gray; background-color: transparent" onmouseover="style.backgroundColor='#EEEEEE'" onmouseout="style.backgroundColor='transparent'" onclick="self.location='www.blumentals.net'">

  Нажми меня
</div>
<div style="margin-right:2px; float: left; cursor: hand; width: auto; padding: 2px; text-align: center; border: 1px solid Gray; background-color: transparent" onmouseover="style.backgroundColor='#EEEEEE'" onmouseout="style.backgroundColor='transparent'" onclick="self.location='www.blumentals.net'">
  Нажми меня
</div>
<div style="margin-right:2px; float: left; cursor: hand; width: auto; padding: 2px; text-align: center; border: 1px solid Gray; background-color: transparent" onmouseover="style.backgroundColor='#EEEEEE'" onmouseout="style.backgroundColor='transparent'" onclick="self.location='www.blumentals.net'">
  Нажми меня
</div>
<div style="margin-right:2px; float: left; cursor: hand; width: auto; padding: 2px; text-align: center; border: 1px solid Gray; background-color: transparent" onmouseover="style.backgroundColor='#EEEEEE'" onmouseout="style.backgroundColor='transparent'" onclick="self.location='www.blumentals.net'">
  Нажми меня
</div>
<div style="margin-right:2px; float: left; cursor: hand; width: auto; padding: 2px; text-align: center; border: 1px solid Gray; background-color: transparent" onmouseover="style.backgroundColor='#EEEEEE'" onmouseout="style.backgroundColor='transparent'" onclick="self.location='www.blumentals.net'">
  Нажми меня

</div>
</div>

<div id="body_panel">

<!-- Левый блок -->
<div id="left_panel">
  <div class="box">
      <div class="box_header">Статьи</div>
        &raquo;<a href="#">Статья 1</a><br />
        &raquo;<a href="#">Статья 2</a><br />

        &raquo;<a href="#">Статья 3</a>
  </div>
</div>

<!-- Правый блок -->
<div id="right_panel">
  <div class="box">
      <div class="box_header">Новости</div>
      <div>
        <p>Содержимое блока</p>

      </div>
  </div>
    <div class="box">
      <div class="box_header">Новости</div>
      <div>
        <p>Содержимое блока</p>
      </div>
  </div>

  <div class="box">
      <div class="box_header">Новости</div>
      <div>
        <p>Содержимое блока</p>
      </div>
  </div>
  <div class="box">
      <div class="box_header">Новости</div>

      <div>
        <p>Содержимое блока</p>
      </div>
  </div>
  <div class="box">
      <div class="box_header">Новости</div>
      <div>
        <p>Содержимое блока</p>

      </div>
  </div>

</div>

<!-- Центральный блок -->
<div id="center_panel">
<div class="box">
  <div class="box_header">Имя блока - 11:10 16 января 2015 г.</div>
    <p>Это текстовая часть</p>
    <p>Это текстовая часть</p>

    <div class="box_footer">
    <a href="#">Нажми меня</a>
    </div>
</div>
</div>
</div>
<!-- Нижнее меню-->
<div id="foot">
 <a href="#">Нажми меня</a> |
 <a href="#">Нажми меня</a> |
 <a href="#">Нажми меня</a> |
 <a href="#">Нажми меня</a> |
 <a href="#">Нажми меня</a> |
 <a href="#">Нажми меня</a> |
 <a href="#">Нажми меня</a>

</div>

</body>
</html>

Не знаю поможет или нет... три колонки